<template>
	<view class="loginContent" >
		<form @submit="formSubmit" class="loginForm">
      <view class="uni-form-item uni-column">
          <input class="uni-input" name="tel" placeholder="请输入手机号码" @blur="checkTel"/>
      </view>
      <view class="uni-form-item uni-column">
          <input class="uni-input" name="password" password placeholder="请输入密码" @blur="checkPassword"/>
      </view>
      <view class="uni-form-item uni-column">
        <checkbox-group name="checkbox">
            <label>
                <checkbox value="1"/><text>用户协议</text>
            </label>
        </checkbox-group>
      </view>
     
      <view class="uni-btn-v">
        <button 
        :type="this.telFlag && this.passwordFlag ? 'primary' : 'default'" 
        :disabled="!this.telFlag || !this.passwordFlag "
        form-type="submit">登陆</button>
      </view>
    </form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        tel: '',
        password: '',
				bgimg: '/static/bg.jpg',
        telFlag: false,
        passwordFlag: false
			};
		},
    methods: {
      checkTel (event) {
        this.tel = event.detail.value
        if (!(/^1[3456789]\d{9}$/.test(this.tel))) {
          uni.showToast({
            title: '用户名错误',
            icon: 'none',
            duration: 2000
          });
          this.telFlag = false
        } else {
          this.telFlag = true
        }
      },
      checkPassword (event) {
        this.password = event.detail.value
        if (this.password.length < 6) {
          uni.showToast({
            title: '密码格式错误',
            icon: 'none',
            duration: 2000
          });
          this.passwordFlag = false
        } else {
          this.passwordFlag = true
        }
      },
      formSubmit (e) {
        console.log(e.detail.value)
        const { tel, password, checkbox } = e.detail.value
        if (checkbox[0] !== '1') {
          uni.showToast({
            title: '请先勾选用户协议',
            icon: 'none',
            duration: 2000
          });
        } else {
          this.login({tel, password})
        }
      },
      login ({tel, password}) {
        uni.request({
          url: 'http://nz1908.wudaxun.top/api/users/login', //仅为示例，并非真实接口地址。
          method: 'POST',
          data: {
            tel, password
          },
          success: (res) => {
            console.log(res.data);
            const {code} = res.data
            switch (code) {
              case '10505':
                console.log('密码错误')
                uni.showToast({
                  title: '密码错误',
                  icon: 'none',
                  duration: 2000
                });
                break
              case '10808':
                console.log('该用户还未注册')
                uni.showToast({
                  title: '该用户还未注册',
                  icon: 'none',
                  duration: 2000
                });
                break
              case '10888':
                console.log('登陆成功')
                uni.showToast({
                  title: '登陆成功',
                  icon: 'none',
                  duration: 2000
                });
                // 跳转到首页
                uni.switchTab({
                  url: '/pages/home/home'
                })
                break
            }
          }
        });
      }
    }
	}
</script>

<style>
.uni-form-item {
  /* padding: 0 30rpx; */
  height: 40px;
  margin: 0px 30rpx;
  padding-top: 20px;
  border-bottom: 1rpx solid #ccc;
}
uni-page-body, .loginContent{
  height: 100%;
}
.loginContent {
  background: url('/static/bg.jpg') no-repeat center center;
  background-size: cover;
}
.loginForm {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}
.uni-input {
  color: #fff;
}
.uni-input-placeholder {
  color: #fff;
}
</style>
